<template>
  <m-window-frame
    :title="$t('创建/编辑') + $t(title)"
    style="height: 100vh"
    :cancelText="'取 消'"
    :okText="'确 定'"
    :okLoading="okLoading"
    :confirmDisabled="confirmDisabled"
    class="v-create-exchange-editor"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <div class="_main g-fd-c">
      <AttrTips
        class="_main-title g-flex-0"
        :type="exchangeType"
      ></AttrTips>
      <div class="_main-content g-pd-16">
        <div class="dec">{{ $t("创建新的或选择存在的") + $t(title) }}</div>
        <div class="_property-table">
          <div
            v-for="row in filteredRowDataList"
            :key="row.key"
            class="_property-row"
          >
            <div
              class="_col1"
              :style="{ width: colWidth }"
            >
              {{ $t(row.title) }}
            </div>
            <div
              class="_col2"
              :class="{ disabled: row.disabled }"
            >
              <el-input
                v-if="row.editType === 'input'"
                v-model="row.placeholder.value"
              ></el-input>
              <el-dropdown
                v-if="row.editType === 'dropdown' || row.editType === 'searchDropdown'"
                :ref="(el: any) => handleDropdownRef(el, row.key)"
                :disabled="row.disabled"
                trigger="click"
                placement="bottom-start"
                style="height: 24px"
                :popper-options="popperOptions"
              >
                <div class="dropdown-content">
                  <img
                    v-if="row.placeholder.icon"
                    :src="row.placeholder.icon"
                    width="16"
                    height="16"
                    onerror="this.src='statics/images/sysml/Stereotype.svg'"
                    alt=""
                  />
                  <span class="text g-one-line">{{ row.placeholder.label }}</span>
                  <img
                    src="statics/icons/app/iconlist2.png"
                    alt=""
                    class="_btn"
                  />
                </div>
                <template #dropdown>
                  <el-dropdown-menu v-if="row.editType === 'dropdown'">
                    <el-dropdown-item
                      v-for="item in row.data"
                      :key="item.value"
                      @click="changeOption(row, item)"
                    >
                      {{ item.label }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                  <ModelDropdown
                    v-if="row.editType === 'searchDropdown'"
                    :list="row.data"
                    :maxHeight="250"
                    @changeOption="(val: DropdownItem) => changeOption(row, val)"
                  ></ModelDropdown>
                </template>
              </el-dropdown>
              <img
                v-if="row.showModelSelect"
                style="margin-left: 7px"
                src="statics/icons/app/iconmore.png"
                class="_btn"
                @click="row.modelSelectFun && row.modelSelectFun(row)"
              />
              <div
                v-if="row.editType === 'modelSelect'"
                class="g-ai-c g-flex-auto"
              >
                <img
                  v-if="row.placeholder.icon"
                  :src="row.placeholder.icon"
                  width="16"
                  height="16"
                  onerror="this.src='statics/images/sysml/Stereotype.svg'"
                  alt=""
                />
                <span class="text g-one-line">{{ row.placeholder.label }}</span>
                <img
                  src="statics/icons/app/iconmore.png"
                  class="_btn"
                  @click="row.modelSelectFun && row.modelSelectFun(row)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </m-window-frame>
</template>

<script lang="ts" setup>
import MWindowFrame from "@/common/ipcWindow/WindowFrame.vue";
import { ref, Ref, computed, watch, onBeforeMount } from "vue";
import AttrTips from "@/common/attrTip/AttrTip.vue";
import { ipcWindowUtil } from "@/mdesign-lib/mdesign-app.umd.js";
import { useRoute } from "vue-router";
import { Params, CloseData } from "./index";
import { modelService } from "@/mdesign-lib/mdesign-app.umd.js";
import { locale } from "@/mdesign-lib/mdesign-app.umd.js";
import { modelTreeMultiSelectWindow, modelTreeSelectWindow } from "@/mdesign-lib/mdesign-app.umd.js";
import { PropertyDataType } from "@/mdesign-lib/mdesign-app.umd.js";
import { ModelData } from "@/mdesign-lib/mdesign-app.umd.js";
import { CreateExchangeDto, ExchangeListItem } from "@/mdesign-lib/mdesign-app.umd.js";
import { MetaclassType } from "@/mdesign-lib/mdesign-app.umd.js";
import { archService } from "@/mdesign-lib/mdesign-app.umd.js";
import { toMap } from "@/util/common";
import ModelDropdown from "@/modules/model/modals/relationCriteria/components/ModelDropdown/index.vue";

interface RowItem {
  title: string | Ref<string>;
  key: string;
  editType: string;
  placeholder: {
    label: string;
    value?: string;
    icon?: string;
    modelInfo?: ModelData;
    exchangeInfo?: ExchangeListItem;
  };
  data?: DropdownItem[];
  showModelSelect?: boolean;
  hide?: boolean;
  disabled?: boolean;
  modelSelectFun?: (row: RowItem) => void | Promise<void>;
}

interface DropdownItem {
  label: string;
  value: string;
  icon?: string;
  modelInfo?: ModelData;
  exchangeInfo?: ExchangeListItem;
}

// 项流有四种创建方式，1是基于已有的关系线relationId；2是树上创建项流关系，
// 3是将项流拖到图形中。4 在矩阵svcv-3b中右键创建，2和3有开始firstEndId和结束secondEndId，3还有diagramId
// 在矩阵中创建
const route = useRoute();
const title = ref("");
const typeTitle = ref("");
let projectId = "";
let relationId = "";
let firstEndId = "";
let secondEndId = "";
let stereotype = "";
let defaultConveyedId = "";
let exchangeType = "";
let isDirection = false;
let showSendingAndReceiving = false;
const okLoading = ref(false);
const confirmDisabled = ref(true);
const isUpdateExchange = ref(false);
const dropdownRef = ref<{ [key: string]: any }>({});
const rowDataMap: { [key: string]: RowItem } = {};

const titleMap = {
  ResourceExchange: "modelConfig.ResourceExchange",
  ServiceExchange: "modelConfig.ServiceExchange",
  OperationalExchange: "modelConfig.OperationalExchange",
  StrategicExchange: "modelConfig.StrategicExchange"
};

const typeTitleMap = {
  ResourceExchange: "modelConfig.UAF::Strategic::Taxonomy::CapabilityKind::Resource",
  ServiceExchange: "modelConfig.UAF::Strategic::Taxonomy::CapabilityKind::Service",
  OperationalExchange: "modelConfig.OperationalPerformer",
  StrategicExchange: "modelConfig.UAF::Strategic::Taxonomy::CapabilityKind::Strategic"
};

const defaultExchangeKind = {
  ResourceExchange: "UAF::Resources::Connectivity::ResourceExchangeKind::ResourceCommunication",
  ServiceExchange: "UAF::Services::Connectivity::ServiceExchangeKind::InformationExchange",
  OperationalExchange: "UAF::Operational::Connectivity::OperationalExchangeKind::InformationExchange"
};

const selectCondition = {
  ResourceExchange: "UAF::Resources::Taxonomy::ResourcePerformer",
  ServiceExchange: "UAF::Services::Taxonomy::Service",
  OperationalExchange: "UAF::Operational::Structure::OperationalPerformer"
};

const showSendingAndReceivingTypes = [MetaclassType.Connector, MetaclassType.Message, MetaclassType.ObjectFlow, MetaclassType.ControlFlow];

const sendingTitle = computed(() => {
  const space = locale.getLocale() === "en" ? " " : "";
  return locale.t("发送") + space + locale.t(typeTitle.value);
});

const receivingTitle = computed(() => {
  const space = locale.getLocale() === "en" ? " " : "";
  return locale.t("接收") + space + locale.t(typeTitle.value);
});

const colWidth = computed(() => {
  return locale.getLocale() === "en" ? "200px" : "170px";
});

const rowDataList = ref<RowItem[]>([
  {
    title: "交换名称",
    key: "exchangeName",
    editType: "input",
    placeholder: {
      label: "",
      value: "",
      icon: ""
    }
  },
  {
    title: "交换类型",
    key: "exchangeKind",
    editType: "searchDropdown",
    placeholder: {
      label: "",
      value: "",
      icon: ""
    },
    data: [],
    hide: true
  },
  {
    title: "传递对象",
    key: "conveyedItem",
    editType: "modelSelect",
    modelSelectFun: conveyedItemSelect,
    placeholder: {
      label: "",
      value: "",
      icon: ""
    },
    data: []
  },
  {
    title: title,
    key: "exchange",
    editType: "searchDropdown",
    placeholder: {
      label: "",
      value: "",
      icon: ""
    },
    data: [],
    hide: true
  },
  {
    title: sendingTitle,
    key: "sending",
    editType: "searchDropdown",
    showModelSelect: true,
    hide: true,
    modelSelectFun: sendingAndReceivingSelect,
    placeholder: {
      label: "",
      value: "",
      icon: ""
    },
    data: []
  },
  {
    title: receivingTitle,
    key: "receiving",
    editType: "searchDropdown",
    showModelSelect: true,
    hide: true,
    modelSelectFun: sendingAndReceivingSelect,
    placeholder: {
      label: "",
      value: "",
      icon: ""
    },
    data: []
  },
  {
    title: "方向",
    key: "direction",
    editType: "dropdown",
    disabled: true,
    placeholder: {
      label: "",
      value: "",
      icon: ""
    },
    data: []
  }
]);

watch(
  () => route.fullPath,
  async () => {
    const routeQuery = route.query as unknown;
    const query = routeQuery as Params;
    stereotype = query.stereotype;
    exchangeType = stereotype.split("::").pop() as string;
    projectId = query.projectId;
    title.value = titleMap[exchangeType];
    typeTitle.value = typeTitleMap[exchangeType];
    isDirection = (query.isDirection as unknown) === "true";
    relationId = query.relationId || "";
    firstEndId = query.firstEndId || "";
    secondEndId = query.secondEndId || "";
    defaultConveyedId = query.conveyedId || "";
    showSendingAndReceiving = (query.showSendingAndReceiving as unknown) === "true";
    console.log("stereotype", stereotype);
  },
  { immediate: true }
);

const filteredRowDataList = computed(() => {
  return rowDataList.value.filter(item => !item.hide);
});

const popperOptions = computed(() => {
  return {
    modifiers: [
      {
        name: "applyStyles",
        effect: ({ state }) => {
          state.elements.popper.style.width = `${Math.max(state.elements.reference.offsetWidth, 110)}px`;
        }
      }
    ]
  };
});

const handleDropdownRef = (el: any, key: string) => {
  dropdownRef.value[key] = el;
};

onBeforeMount(async () => {
  await init();
  await loadConveyed();
  await loadExchangeKind();
  loadExchangeList();
  loadDirection();
});

const init = async () => {
  rowDataList.value.forEach(data => {
    rowDataMap[data.key] = data;
  });
  const sendingData = getData("sending");
  const receivingData = getData("receiving");
  if (relationId) {
    const relationModel = await modelService.getModelData(projectId, relationId);
    if (relationModel.metaclass && showSendingAndReceivingTypes.includes(relationModel.metaclass)) {
      sendingData.hide = false;
      receivingData.hide = false;
    }
    const isConnector = relationModel.metaclass === MetaclassType.Connector || relationModel.metaclass === MetaclassType.Message;
    isDirection = !!relationModel.showAttribute?.isDirection;
    const sendingAndReceiving = (await archService.querySendingAndReceiving(projectId, relationId, stereotype)) as {
      receivings: DropdownItem[];
      sendings: DropdownItem[];
    };
    sendingData.data = sendingAndReceiving.sendings;
    receivingData.data = sendingAndReceiving.receivings;
    if (isConnector && sendingData.data.length === 1 && receivingData.data.length === 1) {
      sendingData.hide = true;
      receivingData.hide = true;
    }
  } else if (showSendingAndReceiving) {
    sendingData.hide = false;
    receivingData.hide = false;
    const sendingAndReceiving = (await archService.querySendingAndReceiving(projectId, relationId, stereotype)) as {
      receivings: DropdownItem[];
      sendings: DropdownItem[];
    };
    sendingData.data = sendingAndReceiving.sendings;
    receivingData.data = sendingAndReceiving.receivings;
  } else {
    const firstEndModel = await modelService.getModelData(projectId, firstEndId);
    const secondEndModel = await modelService.getModelData(projectId, secondEndId);
    sendingData.data = [{ value: firstEndModel.id, label: firstEndModel.name, icon: firstEndModel.icon }];
    receivingData.data = [{ value: secondEndModel.id, label: secondEndModel.name, icon: secondEndModel.icon }];
  }
  loadSending();
  loadReceiving();
};

const loadExchangeList = async () => {
  const exchangeData = getData("exchange");
  // const exchangeKindData = getData('exchangeKind');
  if (!relationId) {
    exchangeData.hide = true;
  } else {
    exchangeData.hide = false;
  }
  if (exchangeData.hide) return;
  const list = relationId ? await archService.queryInformationFlowByRelation(projectId, relationId, stereotype) : [];
  const exchangeMap = toMap(list, "exchangeId");
  const exchangeIds = list.map(it => it.exchangeId as string);
  const exchangeModelInfo = await modelService.getModelDatas(projectId, exchangeIds);
  const exchangeList: DropdownItem[] = exchangeModelInfo.map(it => {
    const name = it.name;
    const typeName = locale.getTByContent(it, it.modelTypeCnName, { en: "metaclass", zhCn: "modelTypeCnName" });
    const prefix = name ? name + ":" + typeName : typeName;

    return {
      value: it.id,
      label: prefix + "[" + it.showAttribute.sourceName + " → " + it.showAttribute.targetName + "]",
      icon: it.icon,
      modelInfo: it,
      exchangeInfo: exchangeMap.get(it.id)
    };
  });

  exchangeList.unshift({ value: "", label: `<${locale.t("新建")}>` });
  exchangeData.data = exchangeList;
  exchangeData.placeholder = exchangeList[0];
};

const updateExchange = async () => {
  const exchangeData = getData("exchange");
  const exchangeKindData = getData("exchangeKind");
  const conveyedItemData = getData("conveyedItem");
  const exchangeNameData = getData("exchangeName");
  const sendingData = getData("sending");
  const receivingData = getData("receiving");
  const modelInfo = exchangeData.placeholder.modelInfo;
  const exchangeInfo = exchangeData.placeholder.exchangeInfo;
  const emptyPlaceholder = { value: "", icon: "", label: "" };

  if (modelInfo && exchangeInfo) {
    isUpdateExchange.value = true;
    const name = modelInfo.name;
    exchangeNameData.placeholder.value = name;

    if (exchangeInfo.exchangeId) {
      const option = exchangeKindData.data?.find(item => item.value === exchangeInfo.exchangeKind);
      if (option) {
        exchangeKindData.placeholder = option;
      }
    }
    if (exchangeInfo?.conveyed) {
      const models = await modelService.getModelDatas(projectId, exchangeInfo.conveyed);
      conveyedItemData.placeholder = {
        value: exchangeInfo.conveyed.join(","),
        label: models.map(item => item.name).join(",")
      };
    } else {
      conveyedItemData.placeholder = { ...emptyPlaceholder };
    }
    if (exchangeInfo.sendingId) {
      const itemFlowSourceModel = await modelService.getModelData(projectId, exchangeInfo.sendingId);
      sendingData.placeholder = { value: itemFlowSourceModel.id, label: itemFlowSourceModel.name, icon: itemFlowSourceModel.icon };
      sendingData.disabled = true;
    }
    if (exchangeInfo.receivingId) {
      const itemFlowTargetModel = await modelService.getModelData(projectId, exchangeInfo.receivingId);
      receivingData.placeholder = { value: itemFlowTargetModel.id, label: itemFlowTargetModel.name, icon: itemFlowTargetModel.icon };
      receivingData.disabled = true;
    }
  } else {
    isUpdateExchange.value = false;
    exchangeKindData.placeholder = exchangeKindData.data?.find(item => item.value === defaultExchangeKind[exchangeType]) || {
      ...emptyPlaceholder
    };
    conveyedItemData.placeholder = { ...emptyPlaceholder };
    exchangeNameData.placeholder = { ...emptyPlaceholder };
    loadSending();
    loadReceiving();
  }
  loadDirection();
};

const loadExchangeKind = async () => {
  const list = await modelService.queryEnumerationLiterals(projectId, stereotype + "Kind");
  const exchangeKindList: DropdownItem[] = list.map(it => {
    const label = locale.getTByContent(it, it.label, { en: "enLabel", zhCn: "label" });
    return {
      ...it,
      label
    };
  });
  const exchangeKindData = getData("exchangeKind");
  exchangeKindData.data = exchangeKindList;
  if (exchangeKindList.length > 0) {
    exchangeKindData.hide = false;
    exchangeKindData.placeholder =
      exchangeKindList.find(item => exchangeKindData.placeholder.value && item.value === exchangeKindData.placeholder.value) ||
      exchangeKindList.find(item => item.value === defaultExchangeKind[exchangeType])!;
  } else {
    exchangeKindData.hide = true;
  }
};

const loadConveyed = async () => {
  if (defaultConveyedId) {
    const exchangeKind = await archService.queryExchangeKindByConveyed(projectId, stereotype, defaultConveyedId);
    if (exchangeKind) {
      const exchangeKindData = getData("exchangeKind");
      const conveyedItemData = getData("conveyedItem");
      const exchangeNameData = getData("exchangeName");
      exchangeKindData.placeholder.value = exchangeKind;
      const conveyedModel = await modelService.getModelData(projectId, defaultConveyedId);
      conveyedItemData.placeholder = {
        value: conveyedModel.id,
        label: conveyedModel.name
      };

      if (!exchangeNameData.placeholder.value) {
        exchangeNameData.placeholder.value = `${conveyedModel.name}的交换`;
      }
    }
  }
};

const loadSending = async () => {
  const sendingData = getData("sending");
  sendingData.disabled = false;
  if (sendingData.data && sendingData.data.length === 1) {
    sendingData.placeholder = sendingData.data[0];
  }
};

const loadReceiving = async () => {
  const receivingData = getData("receiving");
  receivingData.disabled = false;
  if (receivingData.data && receivingData.data.length === 1) {
    receivingData.placeholder = receivingData.data[0];
  }
};

async function conveyedItemSelect() {
  const exchangeKindData = getData("exchangeKind");
  const conveyedItemData = getData("conveyedItem");
  const exchangeNameData = getData("exchangeName");
  const result = await modelTreeMultiSelectWindow.popup({
    loadMethod: "getPropertyTreeList",
    loadParams: JSON.stringify({
      row: {
        checkMethod: "validExchangeConveyed",
        dataType: "Instance",
        modelId: exchangeKindData.placeholder.value,
        isMultiplicity: true,
        key: "",
        updateMethod: null
      },
      projectId: projectId
    }),
    multiple: true,
    rightSelectedIds: conveyedItemData?.placeholder.value?.split(","),
    attrTip: "checkbox",
    title: "选择模型",
    delay: false,
    showNodeLabel: true
  });
  if (result.success) {
    const selectedId = result.selectedId as string[];
    const models = selectedId.length > 0 ? await modelService.getModelDatas(projectId, selectedId) : [];
    conveyedItemData.placeholder = {
      value: selectedId.join(","),
      label: models.map(item => item.name).join(",")
    };
    if (!exchangeNameData.placeholder.value && models.length) {
      const names = models.map(model => model.name);
      exchangeNameData.placeholder.value = `${names.join(",")}的交换`;
    }
  }
}

async function sendingAndReceivingSelect(row: RowItem) {
  const data = getData(row.key);
  if (data.disabled) return;
  const result = await modelTreeSelectWindow.popup({
    loadMethod: "getPropertyTreeList",
    loadParams: JSON.stringify({
      row: {
        modelId: relationId,
        key: "",
        dataType: PropertyDataType.INSTANCE,
        moreBtnCondition: selectCondition[exchangeType],
        isMultiplicity: false,
        checkMethod: "",
        updateMethod: ""
      },
      projectId
    }),
    selectedId: data.placeholder.value as string,
    attrTip: "radio",
    title: "选择元素",
    delay: false,
    showNodeLabel: true,
    nullable: false
  });
  if (result.success) {
    const selectedId = result.selectedId as string;
    if (selectedId !== data.placeholder.value) {
      const typeModel = await modelService.getModelData(projectId, selectedId);
      data.placeholder = {
        value: typeModel.id,
        label: typeModel.name,
        icon: typeModel.icon
      };
      loadDirection();
    }
  }
}

const loadDirection = async () => {
  const directionData = getData("direction");
  const sendingDataPlaceholder = getData("sending").placeholder;
  const receivingDataPlaceholder = getData("receiving").placeholder;

  const from = sendingDataPlaceholder.label;
  const to = receivingDataPlaceholder.label;
  directionData.data = [
    {
      label: `从 ${from} 到 ${to}`,
      value: "sourceToTarget"
    },
    {
      label: `从 ${to} 到 ${from}`,
      value: "targetToSource"
    }
  ];

  if (sendingDataPlaceholder.value && receivingDataPlaceholder.value) {
    directionData.placeholder.label = `从 ${from} 到 ${to}`;
    directionData.placeholder.value = "sourceToTarget";
    confirmDisabled.value = false;
  } else {
    confirmDisabled.value = true;
  }

  directionData.disabled = isDirection;

  if (!directionData.disabled && (!sendingDataPlaceholder.value || !receivingDataPlaceholder.value)) {
    directionData.disabled = true;
  }

  if (isUpdateExchange.value) {
    directionData.disabled = true;
  }
};

const getData = (key: string) => {
  return rowDataMap[key];
};

const changeOption = async (row: RowItem, option: DropdownItem) => {
  const key = row.key;
  const exchangeData = getData(key);
  exchangeData.placeholder = option;
  const currentDropDownRef = dropdownRef.value[key];
  currentDropDownRef.handleClose();
  if (key === "sending" || key === "receiving") {
    loadDirection();
  }
  if (key === "exchange") {
    updateExchange();
  }

  if (key === "exchangeKind") {
    const conveyedItemData = getData("conveyedItem");
    conveyedItemData.placeholder = { value: "", icon: "", label: "" };
    loadExchangeList();
  }
};

async function handleOk() {
  okLoading.value = true;
  const currentDirection = getData("direction").placeholder.value;
  const sendingDataPlaceholder = getData("sending").placeholder.value;
  const receivingDataPlaceholder = getData("receiving").placeholder.value;
  const itemflowData: Omit<CreateExchangeDto, "diagramId" | "sourceShapeId" | "targetShapeId"> = {
    name: getData("exchangeName").placeholder.value as string,
    projectId,
    source: sendingDataPlaceholder,
    target: receivingDataPlaceholder,
    exchangeKind: getData("exchangeKind").placeholder.value as string,
    applyStereotypes: [stereotype],
    conveyedItems: getData("conveyedItem").placeholder.value?.split(",") as string[]
  };
  Object.assign(itemflowData, { directionSameWithRelation: currentDirection === "sourceToTarget" });

  if (relationId) {
    Object.assign(itemflowData, { relationId: relationId });
  }
  console.log("itemflowData", itemflowData);
  if (isUpdateExchange.value) {
    const exchangeId = getData("exchange").placeholder.value as string;
    const updateData = {
      name: itemflowData.name,
      projectId: itemflowData.projectId,
      exchangeKind: itemflowData.exchangeKind,
      applyStereotypes: itemflowData.applyStereotypes,
      conveyedItems: itemflowData.conveyedItems,
      relationId,
      exchangeId
    };
    await archService
      .updateExchange(updateData)
      .then(() => {
        handleclose({ windowName: "CreateExchangeWindow", success: false, updatedExchangeId: exchangeId });
      })
      .catch(err => console.log(err))
      .finally(() => {
        okLoading.value = false;
      });
  } else {
    ipcWindowUtil.sendWindowChange({
      success: true,
      itemflowData
    });
  }
}

function handleclose(data: CloseData) {
  ipcWindowUtil.closeWindow(data);
}

function handleCancel() {
  handleclose({ windowName: "CreateExchangeWindow", success: false });
}
</script>
<style lang="scss">
.v-create-exchange-editor {
  ._main {
    height: 100%;
    ._main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .dec {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
        margin-bottom: 8px;
      }
    }
    ._property-table {
      width: 100%;
      flex: 1;
      overflow: hidden;
      border: 1px solid #e0e0e0;
    }
    ._property-row {
      display: flex;
      height: 27px;
      line-height: 26px;
      border-bottom: 1px solid #e0e0e0;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.85);
      ._col1 {
        padding-left: 8px;
        border-right: 1px solid #e0e0e0;
      }
      ._col2 {
        display: flex;
        flex: 1;
        overflow: hidden;
        padding: 0 7px;
        align-items: center;
        .c-dropdown {
          padding-left: 8px;
        }
        &._content {
          display: flex;
          padding-left: 8px;
        }
        &.disabled {
          background-color: #f5f7fa;
        }
      }
    }
    .el-input {
      .el-input__wrapper {
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
      }
    }
    ._btn {
      display: inline-block;
      cursor: pointer;
    }
    .el-dropdown {
      flex: 1;
      overflow: hidden;
      .el-tooltip__trigger {
        flex: 1;
        overflow: hidden;
      }
    }
    .dropdown-content {
      display: flex;
      align-items: center;
      height: 24px;
      span {
        display: inline-block;
        font-size: 12px;
        margin-right: 4px;
      }
    }
    .text {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      line-height: 14px;
      flex: 1;
    }
    .img-btn {
      display: flex;
      align-items: center;
    }
  }
}
</style>
